<template>
<div>
<!--  1.标题-->
  <h1>欢迎注册</h1>
<!--  2.表单-->
  <div>
    <van-form>
      <van-cell-group inset>
        <van-field
            v-model="user.name"
            label="用户名"
            @change="checkName"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
            v-model="user.phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />
      </van-cell-group>
        <van-cell-group inset>
          <van-field
              v-model="code"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
      <van-cell-group inset>
        <van-field
            v-model="user.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        </van-cell-group>
        <van-cell-group inset>
        <van-field
            v-model="password2"
            type="password"
            label="确认密码"
            placeholder="请再次输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="button" @click="add">
          注册新用户
        </van-button>
      </div>
    </van-form>

  </div>
<!--  3.左右 跳转-->
  <div>
    <router-link style="float: left" to="/login">登录账号</router-link>
    <router-link style="float:right;" to="/findpass">找回密码</router-link>
  </div>
</div>
</template>

<script>
import { showToast } from 'vant';
export default {
  name: "Register",
  data(){
    return{
      user:{},
      code:"",
      password2:""
    }
  },methods:{
    checkName(){
      //请求接口 校验用户名 是否可用
      this.axios.get("user/checkname.do?name="+this.user.name).then((res)=>{
          //res.data  等于 R
          if(res.data.code==0){
            showToast('用户名可用');
          }else {
            showToast('用户名已被占用！');
          }
      })
    },add(){
      //请求接口 实现注册 post 参数 json格式
      this.axios.post("user/register.do",this.user).then((res)=>{
        if(res.data.code==0){
          showToast('注册成功');
          //实现页面跳转 Vue-Router
          this.$router.push("/login");
        }else {
          showToast(res.data.data);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>